<template>
  <div>
    <el-row :span="24" style="margin:26px 0 0;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label="订单类型">
          <el-select v-model="formInline.orderType" style="width: 150px;">
			<el-option label="全部" value=""></el-option>
            <el-option label="当面付订单" value="payToPay"></el-option>
            <el-option label="城主订单" value="buyCity"></el-option>
            <el-option label="商品订单" value="addShopOrder"></el-option>
            <el-option label="套餐订单" value="buyVoucher"></el-option>
            <el-option label="酒店订单" value="addShopHotelOrder"></el-option>
            <el-option label="创客订单" value="upperMarker"></el-option>
            <el-option label="发红包" value=" sendRed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker  type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
          到
          <el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
        </el-form-item>
        <el-form-item  label="订单ID">
          <el-input v-model="formInline.orderId" style="width: 150px;"></el-input>
        </el-form-item >
		<el-form-item  label="商家名称">
		  <el-input v-model="formInline.storeName" style="width: 150px;"></el-input>
		</el-form-item >	
        <el-button type="primary" @click="fetchData(1)">查询</el-button>
        <el-button type="primary"
                   @click="deriveSubmit" >导出</el-button>
      </el-form>
	  <el-form :inline="true" :model="platformStat" class="demo-form-inline" label-width="100px">
	    <el-form-item label="平台收益">
	      {{platformStat.inAmt}}元
	    </el-form-item>
		<el-form-item label="平台支出">
		  {{platformStat.outAmt}}元
		</el-form-item>
		<el-form-item label="平台剩余">
		  {{platformStat.lastAmt}}元
		</el-form-item>
	  </el-form>
    </el-row>
    <el-table
      :data="pageInfo.dtos"
      v-loading="table_loading"
      element-table_loading-text="加载中"
      stripe
      height="500"
      style="width: 100%">
<!--      <el-table-column
        label="订单ID"
        width="150"
        prop='orderId'>
      </el-table-column> -->
      <el-table-column
        label="用户ID"
        width="150"
        >
        <template scope="scope">
          <router-link :to="'/user/user_detail/'+scope.row.userId" target="_blank" ><span class="pointer">{{ scope.row.userId}}</span></router-link>
        </template>
      </el-table-column>
  <!--    <el-table-column
        width="150"
        label="本地商户编号" prop='storeId'>
      </el-table-column> -->
      <el-table-column
        width="100"
        label="支付类型" prop='orderType'>
      </el-table-column>
      <el-table-column
        label="商家名称"
        prop='storeName'>
      </el-table-column>
      <el-table-column
        width="100"
        label="应付金额"
        prop='amount'>
      </el-table-column>
      <el-table-column
        width="200"
        label="支付时间"
        prop='payTime'>
      </el-table-column>
      <el-table-column
        width="100"
        label="订单状态"
        prop='statusZh'>
      </el-table-column>
      <el-table-column
        label="红包股数量"
        prop='redAmt'>
      </el-table-column>
      <el-table-column
        label="抵用币金额"
        prop='offsetAmt'>
      </el-table-column>
      <el-table-column
        label="实际付款金额"
        prop='actualAmt'>
      </el-table-column>
      <el-table-column
        label="会员卡金额"
        prop='sysAmt'>
      </el-table-column>
      <el-table-column
        
        width="100"
        label="平台收益"
        prop='platformAmt'>
      </el-table-column>
      <el-table-column
       
        width="150"
        label="商品名称"
        :show-overflow-tooltip="true"
        prop='subject'>
      </el-table-column>
      <el-table-column
        label="支付方式"
        prop='payMethod'>
      </el-table-column>
    </el-table>
    <div class="paginate">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pageInfo.count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name: "orderList",
  data() {
    return {
      table_loading: true,
      formInline: {
        orderType: '',
        orderId:'',
        startTime:'',
        endTime:'',
		storeName: ''
      },
      pageInfo: {
        pageNum: 1,
        pageSize:20,
        count: 1,
        dtos: []
      },
	  platformStat: {
		  inAmt: 0,
		  outAmt: 0,
		  lastAmt: 0
	  },
      startTime:'',
      endTime:'',
    }
  },
  mounted() {
    let vm = this
    vm.fetchData(vm
	.pageInfo.pageNum)
  },
  methods: {
    /**
     * @Description: 获取订单列表及查询
     * @author liuChen
     * @date 2020-09-08 10:22
    */
    fetchData(page=1) {
      let vm = this
      vm.table_loading = true
      if (vm.startTime && vm.endTime) {
        vm.formInline.startTime=dateFormat(vm.startTime)
        vm.formInline.endTime=dateFormat(vm.endTime)
        if (vm.formInline.startTime>vm.formInline.endTime) {
          vm.$message({
            type: 'warning',
            message: '开始时间不能大于结束时间'
          });
          vm.table_loading = false
          return;
        }
      }else{
        vm.formInline.startTime=''
        vm.formInline.endTime=''
      }
      if (vm.startTime&&!vm.endTime) {
        vm.$message({
          type: 'warning',
          message: '请选择结束时间'
        });
        vm.table_loading = false
        return;
      }
      if (!vm.startTime&&vm.endTime) {
        vm.$message({
          type: 'warning',
          message: '请选择开始时间'
        });
        vm.table_loading = false
        return;
      }
      // vm.table_loading = true
      vm.pageInfo.pageNum = page
      vm.formInline.pageNum = page
      console.log(vm.formInline)
      vm.dataApi.ajax('selectKjtPay',vm.formInline, res => {
          vm.table_loading = false
          let data = JSON.parse(JSON.stringify(res))
          /**
           * 订单状态说明：
           *  支付完成 - PAY_FINISHED  TRADE_SUCCESS  TRADE_FINISHED  close
           *  支付中 - p
           *  空 - 空字符串
           * */ 
          for(var i=0; i<data.dtos.length; i++){
            data.dtos[i].statusZh = ['PAY_FINISHED', 'TRADE_SUCCESS', 'TRADE_FINISHED', 'close'].indexOf(data.dtos[i].status)>-1? '支付完成': (data.dtos[i].status=='p'? '支付中': '');
          }
          vm.pageInfo.dtos = data.dtos
          vm.pageInfo.count = data.count
		  vm.getPlatformStat()
      });
    },
	getPlatformStat() {
		let vm = this
		vm.dataApi.ajax('sumKjtPay',vm.formInline, res => {
			vm.platformStat.inAmt = res.inAmt
			vm.platformStat.lastAmt = res.lastAmt
			vm.platformStat.outAmt = res.outAmt
		});
	},
    /**
     * @Description: 列表翻页
     * @author liuChen
     * @date 2020-09-08 10:35
    */
    handleCurrentChange(val) {
      this.fetchData(val);
    },
    dateString(date) {
      let year = date.toLocaleDateString().substring(0, 4);
      let month = date.toLocaleDateString().substring(5, 6);
      let day = date.toLocaleDateString().substring(7, 9);
      if (day < 10) {
        day = '0' + day
      }
      if (month < 10) {
        month = '0' + month
      }
      return year+"-"+month+"-"+day
  },
    deriveSubmit(){
      let vm = this
      let startTime = ''
      let endTime = ''
      let orderType = vm.formInline.orderType
      let orderId = vm.formInline.orderId

      if (vm.startTime && vm.endTime) {
        if (vm.startTime>vm.endTime) {
          this.showMsg('开始时间不能大于结束时间','warning');
          return;
        }
        startTime = vm.dateString(vm.startTime)
        endTime = vm.dateString(vm.endTime)
      }
      if (vm.startTime&&!vm.endTime) {
        startTime = ''
      }
      if (!vm.startTime&&vm.endTime) {
        endTime = ''
      }
      console.log(endTime)
      let host = 'https://console.hzsuhu.cn/enve'
      location.href=encodeURI(encodeURI(host+"WithdrawControl/exportkjtPay?startTime="+startTime+'&endTime='+endTime+'&orderType='+orderType+'&orderId='+orderId))
    },
  }
}
</script>

<style scoped>

</style>
